”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript 中的交互:“警报”、“提示”和“确认”

JavaScript 中的交互:“警报”、“提示”和“确认”

发布于2024-11-16
浏览:958

Interaction in JavaScript: `alert`, `prompt`, and `confirm`

****

欢迎回到我们的 JavaScript 世界之旅!在这篇博文中,我们将探讨在 JavaScript 中与用户交互的三种基本方法:alertpromptconfirm。这些方法分别允许您显示消息、收集用户输入和确认操作。让我们深入研究每种方法并看看它们是如何工作的。

1. 警报

alert方法用于显示一个带有消息和“确定”按钮的简单对话框。此方法对于向用户显示重要信息或警告很有用。

句法:

alert(message);

例子:

alert("Hello, World!");

解释:

  • 消息: 要在对话框中显示的文本。
  • alert 方法暂停脚本的执行,直到用户单击“确定”按钮。

用例:

// Display a welcome message
alert("Welcome to our website!");

2. 迅速的

prompt方法用于显示一个对话框,提示用户输入一些文本。它返回用户输入的文本,如果用户取消输入,则返回 null

句法:

prompt(message, default);

例子:

let userName = prompt("Please enter your name:", "Guest");
console.log("Hello, "   userName   "!");

解释:

  • 消息: 要在对话框中显示的文本。
  • default: 输入字段中显示的默认文本。该参数是可选的。
  • prompt方法返回用户输入的文本,如果用户取消输入,则返回null

用例:

// Collect user input for their name
let userName = prompt("Please enter your name:", "Guest");
if (userName !== null) {
  console.log("Hello, "   userName   "!");
} else {
  console.log("No name entered.");
}

3. 确认

confirm方法用于显示一个带有消息和两个按钮的对话框:“确定”和“取消”。如果用户单击“确定”,则返回 true;如果用户单击“取消”,则返回 false

句法:

confirm(message);

例子:

let isConfirmed = confirm("Are you sure you want to delete this item?");
if (isConfirmed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion canceled.");
}

解释:

  • 消息: 要在对话框中显示的文本。
  • 如果用户点击“确定”,则confirm方法返回true;如果用户点击“取消”,则返回false

用例:

// Confirm an action before proceeding
let isConfirmed = confirm("Are you sure you want to delete this item?");
if (isConfirmed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion canceled.");
}

结合警报、提示和确认

您可以组合这些方法来创建更具交互性和动态的用户体验。这是一个演示如何一起使用所有三种方法的示例:

例子:

// Display a welcome message
alert("Welcome to our website!");

// Collect user input for their name
let userName = prompt("Please enter your name:", "Guest");
if (userName !== null) {
  console.log("Hello, "   userName   "!");

  // Confirm an action before proceeding
  let isConfirmed = confirm("Do you want to proceed?");
  if (isConfirmed) {
    console.log("Proceeding...");
  } else {
    console.log("Action canceled.");
  }
} else {
  console.log("No name entered.");
}

结论

alertpromptconfirm 方法是 JavaScript 中与用户交互的强大工具。它们分别允许您显示消息、收集用户输入和确认操作。通过理解和使用这些方法,您可以创建更具交互性和动态的 Web 应用程序。

在下一篇博文中,我们将更深入地探讨在 JavaScript 中处理用户输入和事件。请继续关注我们的 JavaScript 世界之旅!

版本声明 本文转载于:https://dev.to/codenextgen/interaction-in-javascript-alert-prompt-and-confirm-e80?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-11-16
  • 如何用PHP获取客户端的当地时间?
    如何用PHP获取客户端的当地时间?
    在 PHP 中检索客户端的本地时间在 PHP 应用程序中处理日期和时间时,必须记住 PHP 主要运行于服务器端。因此,默认情况下,与时间相关的函数(如 date())根据服务器的位置和时区提供时间。但是,在需要捕获客户端(用户)本地时间的情况下,需要采用替代方法。这里有一个使用 JavaScript...
    编程 发布于2024-11-16
  • 所有可变参数函数都会将“float”参数提升为“double”吗?
    所有可变参数函数都会将“float”参数提升为“double”吗?
    在可变参数函数中将浮点参数提升为 Double在之前的讨论中,注意到 printf() 将浮点参数提升为在接受之前加倍。这就提出了一个问题:所有可变参数函数都执行此提升吗?可变参数参数提升是的,根据 C99 和 C 标准,浮点参数传递给可变参数函数提升为双精度。标准规范C99(第 6.5.2.2 节...
    编程 发布于2024-11-16
  • MySQL 表悖论:如何修复既存在又不存在的表?
    MySQL 表悖论:如何修复既存在又不存在的表?
    薛定谔的MySQL表:存在之谜在数据库管理领域,MySQL表可以表现出一种矛盾的存在。正如您所遇到的,表似乎同时存在和不存在的谜团可能会带来令人沮丧的挑战。让我们深入研究根本问题并探索潜在的解决方案。当遇到令人困惑的错误“表已存在”而“DROP TABLE”返回“未知表”时,很可能是表定义之间存在差...
    编程 发布于2024-11-16
  • 编程中什么时候需要三指针?
    编程中什么时候需要三指针?
    编程中的三重指针在各种编程语言中,指针是内存管理和间接寻址的强大工具。然而,什么时候需要多层次的指针解引用,导致像三重指针(char***)这样的结构?三重指针的目的和优点虽然常规指针 (char*) 保存变量的地址,但三重指针表示以下情况:char**foo 指向指针它本身指向一个指针char**...
    编程 发布于2024-11-16
  • 你应该使用 MySQL 的 PASSWORD() 函数进行密码哈希吗?
    你应该使用 MySQL 的 PASSWORD() 函数进行密码哈希吗?
    MySQL 密码函数注意事项对应用程序的密码进行哈希处理时,确定最佳方法至关重要。 MySQL 的密码函数在这方面尤其重要,但其使用引起了争议。MySQL 密码函数的优缺点使用 MySQL 的密码函数有一些优点。它是一个内置函数,可以安全地处理散列和加盐。然而,它也有潜在的缺点:使用限制: MySQ...
    编程 发布于2024-11-16
  • 为什么C++不能像Java一样直接返回数组?
    为什么C++不能像Java一样直接返回数组?
    为什么 C 不简化数组返回类型虽然 Java 等编程语言允许简单的数组返回类型,但 C 需要更复杂的方法。这不是任意的,而是源于基本的语言设计决策。内存管理和按值传递与按引用传递C 区分传递-按值传递和按引用传递。数组名本质上是指针。按值传递数组的结果是其第一个元素的内存地址,该地址在函数作用域之外...
    编程 发布于2024-11-16
  • 回合制多人啤酒游戏
    回合制多人啤酒游戏
    由于我需要在不久的将来组织一个系统思维研讨会,所以我需要一个啤酒游戏来开始它。 啤酒游戏本身由四个角色组成:零售商、批发商、分销商和工厂。通过物流的时滞性质来理解系统视角,可以更好地理解系统边界。 由于这是一个几个小时的研讨会,我希望这款啤酒游戏能够实现以下功能。 这是一款多人游戏。 啤酒游戏本身会...
    编程 发布于2024-11-16
  • 为什么我的网站在 Mac 和 PC 上看起来不同?
    为什么我的网站在 Mac 和 PC 上看起来不同?
    Mac 和 PC 上的字体行高差异Mac 和 PC 系统之间的字体渲染和行高差异问题可以通过一直令网页设计师头疼的问题。 HTML 和 CSS 对元素外部的行高提供有限的控制,这可能会导致在使用基于表格的布局或使用特定字体时内容未对齐。在所呈现的情况下,编码设计旨在对齐信息小部件垂直位于 div 中...
    编程 发布于2024-11-16
  • 为什么 Go 中的空结构如此强大?
    为什么 Go 中的空结构如此强大?
    理解 Go 中空结构体的使用空结构体,只是 Go 中的 struct{} 类型,服务于一系列专门用途,并在优化代码性能并有效管理语言内的数据结构:属性和优点:最小尺寸:空结构恰好占用 0 字节内存,使它们成为 Go 中最小的构建块。Slice 和 Channel优化: 空结构体的切片和通道非常节省内...
    编程 发布于2024-11-16
  • 为什么我的文本区域看起来比其相邻元素更高?
    为什么我的文本区域看起来比其相邻元素更高?
    Textarea 和相邻元素对齐方式的差异:详细说明尽管出现了这种情况,但代码片段中的 textarea 元素并未放置在更高的位置比它的邻居,跨度元素。这种视觉错觉源于网页布局的一个基本方面,称为基线对齐。基线对齐和下降渲染内联元素,例如跨度和文本区域在同一基线上,这是大多数角色所在的线。但是,某些...
    编程 发布于2024-11-16
  • 如何使用 OpenCV 解决数字提取过程中数独方块中的凸性缺陷?
    如何使用 OpenCV 解决数字提取过程中数独方块中的凸性缺陷?
    使用 OpenCV 解决数独方块中的凸性缺陷问题:在使用 OpenCV 从数独图像中提取数字的过程中,出现了差异数独的真实边界(红线)和图像扭曲后的近似轮廓(绿线)之间。这种位移可能会影响OCR过程的准确性。解决方案:1.图像调整:为了补偿亮度变化,将每个像素除以闭运算的结果来调整图像的对比度。2....
    编程 发布于2024-11-16
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-16
  • 为什么 C/C++ 中 `size_t` 是无符号的:历史的必然还是现代的 bug 磁石?
    为什么 C/C++ 中 `size_t` 是无符号的:历史的必然还是现代的 bug 磁石?
    为什么 size_t 无符号?Bjarne Stroustrup 的观察结果是“使用无符号而不是 int 来多获得一位来表示正整数几乎从来都不是一个好主意”引起了人们对将 size_t 设为无符号的决定的担忧。历史起源最初,size_t 是无符号的,以适应具有 16 位指针的体系结构,例如 DOS ...
    编程 发布于2024-11-16
  • 如何使用 Selenium Python 从 Shadow Root 中提取信息?
    如何使用 Selenium Python 从 Shadow Root 中提取信息?
    如何使用 Selenium 从影子根中提取信息 PythonSelenium 为 Web 自动化提供了一个强大的框架,包括提取信息的能力来自动态加载的 Web 元素(例如影子根)的信息。本指南将演示如何克服从影子根中的特定在线商店提取产品标签和其他字段的挑战。挑战:从影子根中提取信息 当遇到影子根时...
    编程 发布于2024-11-16

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3